<template>
<div class="mt-10 ml-10 mr-10"> 
    <el-card>
      <div class="flex aic f16">
        <p>
          <span class="bs">设备 / </span>
          <span class="jia">传感器列表</span>
          <span class="f14"> - 展示EUI、名称、状态、数据类型等设备信息,可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点,并提供移动群组等功能。</span>
        </p>
      </div>
  </el-card>
  </div>
  <div class="mt-10  ml-10 mr-10">
    <el-card class="box-card">
      <Tabs @change-tap="changeTab"/> 
      <Search
        @search="onSearch"
        @condition="oncondition"
        @refresh="onrefresh"
        ref="searchRef"
        :total="total"
        :eui="eui"
        :devGroup="devGroup"
        :online="online"
        :dateObj="dateObj"
        :date ="date"
      />
  <el-table :data="sensorList" style="width: 100%">
        <el-table-column type="index" label="" width="30" />
        <el-table-column align="center" prop="eui" label="EUI" />
        <el-table-column align="center" prop="name" label="设备名称" />
        <el-table-column align="center" prop="nums" label="传感器通道" />
        <el-table-column align="center" prop="devGroup" label="群组名称" />
        <el-table-column align="center" prop="loop" label="上报周期" />
        <el-table-column align="center" prop="mhz" label="频率" />
        <el-table-column align="center" prop="online" label="online" :formatter="utils.fcline" />
        <el-table-column align="center" prop="bTime" label="时间" :formatter="utils.fcTime"/>
        <el-table-column align="center" prop="agreement" label="协议" />
        <el-table-column align="center" label="操作">
        <el-button size="small" type="primary" @click="move = true">移动</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete"
          >详情</el-button
        >
      
    </el-table-column>
  </el-table>

  <el-dialog v-model="move" title="提示" width="30%" center>
    <el-form
    class="device-sensor-search"
    :label-position="'right'"
    label-width="100px"
    :model="fromObj"
    style="max-width: 460px"
  >
    <el-form-item label="设备群组">
      <el-select
        v-model="fromObj.devGroup"
        class="m-2"
        placeholder="请选择群组"
        size="large"
      >
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="move = false">取消</el-button>
        <el-button type="primary" @click="moveDeter">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <div class="flex jc-c mt-20">
     <el-pagination background page-size="pageSize" :current-page="currPage" @current-change="changePage" layout="prev, pager, next" :hide-on-single-page="value" :total="total" />
  </div>
  </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref,inject,reactive } from "vue";
import * as api from '@/api/index';
import Tabs from './assembly/Tabs.vue'
import Search from './assembly/Search.vue'
//根组件提供utils对象
const utils = inject('utils');
//传感器列表
const sensorList = ref([])
//弹窗
const move = ref(false)
//分页
let currPage = ref(1);
let pageSize = ref(5);
let total = ref(0);
let agreement = ref('all');
let devGroup = ref('');
let eui = ref('');
let online = ref('all');
let date = ref('');
// let dateObj = ref();
const changePage = (newPage)=>{
 currPage.value = newPage
 getSensorList();
}
//列表请求
const getSensorList = (newCondition)=>{
  console.log(`output->dateObj`,newCondition)
  console.log(`output->date`,date.value)
  let  data={
    currPage: currPage.value,
    pageSize: pageSize.value,
    agreement:agreement.value,
      ...newCondition,
    dateObj:'',
    // date,
    }
    api.$sensorList(data).then(res=>{
      sensorList.value = res.data
      console.log(`output->res.data`,res.data)
      total.value = res.total
    })
}
onMounted(getSensorList);
const changeTab = (newname)=>{
  agreement.value = newname,
  currPage.value = 1;
  getSensorList()
console.log(`osasads`,agreement)
}
//点击搜索
const onSearch = (fromObj)=>{
  if(!!fromObj.dateObj){
    let startDate = new Date(fromObj.dateObj[0]).getTime();
    let endDate = new Date(fromObj.dateObj[1]).getTime();
    date.value = startDate+ '-' + endDate;
    console.log(date.value)
  }
  getSensorList(fromObj)
}
//点击条件
const oncondition = (fromObj)=>{
    fromObj.eui='';
    fromObj.online='';
    fromObj.devGroup='';
    fromObj.dateObj='';
}
//点击刷新
const onrefresh = (fromObj)=>{
    let  data={
    currPage: currPage.value,
    pageSize: pageSize.value,
    agreement:agreement.value,
    }
    api.$sensorList(data).then(res=>{
      sensorList.value = res.data
      total.value = res.total
    })
}
//移动
const fromObj = reactive({
    devGroup:'',
})
// 群组列表
const groupList = ref([]);
// 请求群组列表
const getGroupList = () => {
  api.$groupList().then((res) => {
    groupList.value = res.data.map((item) => {
      return {
        value: item.id,
        label: item.groupName
      };
    });
  });
};
onMounted(getGroupList);
const moveDeter = ()=>{
  console.log(`output->fromObj.devGroup`,fromObj)
  move.value=false
}
</script>
<style lang='less'>
</style>